<template>
   <div class="time-line-root">
     <div ref="schart" id="sChart" class="time-line-schart">
     </div>
     <div class="config-trigger" @click="$_triggerConfigForm">
       <icon size="25" type="gear-b"></icon>
     </div>
     <transition name="config">
      <div v-show="config_form_show" class="config">
        <Card bordered>
          <p slot="title">
            Config
            <Button class="h-btn-apply" size="small" type="text">
              应用
            </Button>
          </p>
          <Collapse accordion>
            <Panel name="1">
              线条设置
            </Panel>
            <Panel name="2">
              测试No.
            </Panel>          
          </Collapse>
        </Card>
      </div>       
     </transition>
     <div class="h-view-number-container">
       <div class="h-view-number">View Number</div>
       <div>
         <ButtonGroup class="h-button-group">
           <Button type="primary">1</Button>
           <Button type="ghost">2</Button>
           <Button type="ghost">3</Button>
           <Button type="ghost">6</Button>           
         </ButtonGroup>
       </div>
     </div>

  </div> 
</template>

<script>
/*eslint-disable */
import echarts from "echarts";
import _ from "lodash";

export default {
  data() {
    return {
      sChart: null,
      config_form_show: false
    };
  },
  props: {
    dataset: {
      type: Array,
      default: function() {
        return [];
      }
    }
  },
  computed: {
    font_size() {
      return 12;
    },
    opt_serieses() {
      return [
        {
          name: "SPEED",
          yAxisIndex: 1,
          data: this.dataset
            .filter(e => typeof e["speed"] == "number")
            .map(e => [e["row_id"], e["speed"]])
        },
        {
          name: "U30",
          yAxisIndex: 0,
          data: this.dataset
            .filter(e => typeof e["u30"] == "number")
            .map(e => [e["row_id"], e["u30"]])
        },
        {
          name: "U45",
          yAxisIndex: 0,
          data: this.dataset
            .filter(e => typeof e["u45"] == "number")
            .map(e => [e["row_id"], e["u45"]])
        },
        {
          name: "U50",
          yAxisIndex: 0,
          data: this.dataset
            .filter(e => typeof e["u50"] == "number")
            .map(e => [e["row_id"], e["u50"]])
        },
        {
          name: "I30",
          yAxisIndex: 2,
          data: this.dataset
            .filter(e => typeof e["i30"] == "number")
            .map(e => [e["row_id"], e["i30"]])
        },
        {
          name: "I50",
          yAxisIndex: 2,
          data: this.dataset
            .filter(e => typeof e["i50"] == "number")
            .map(e => [e["row_id"], e["i50"]])
        },
        {
          name: "OIL",
          yAxisIndex: 3,
          data: this.dataset
            .filter(e => typeof e["oil"] == "number")
            .map(e => [e["row_id"], e["oil"]])
        },
        {
          name: "POLOHOUSING",
          yAxisIndex: 3,
          data: this.dataset
            .filter(e => typeof e["polohousing"] == "number")
            .map(e => [e["row_id"], e["polohousing"]])
        },
        {
          name: "SOLENOIDSWITCH",
          yAxisIndex: 3,
          data: this.dataset
            .filter(e => typeof e["solenoidswitch"] == "number")
            .map(e => [e["row_id"], e["solenoidswitch"]])
        },
        {
          name: "WATER",
          yAxisIndex: 3,
          data: this.dataset
            .filter(e => typeof e["water"] == "number")
            .map(e => [e["row_id"], e["water"]])
        },
        {
          name: "BUSBAR",
          yAxisIndex: 3,
          data: this.dataset
            .filter(e => typeof e["busbar"] == "number")
            .map(e => [e["row_id"], e["busbar"]])
        }
      ].map(e => {
        e = {
          ...e,
          smooth: true,
          showSymbol: false,
          type: "line"
        };
        // e["sampling"] = "max";
        return e;
      });
    },
    opt_legend() {
      return {
        data: this.opt_serieses.map(e => {
          return {
            name: e["name"],
            icon: "roundRect"
          };
        }),
        orient: "vertical",
        right: 6,
        bottom: 40,
        type: "scroll",
        itemHeight: this.font_size,
        textStyle: {
          fontSize: this.font_size
        }
        // width:500
      };
    }
  },
  watch: {
    dataset: function(newVal, oldVal) {
      this.sChart.setOption(this.getOp());
    }
  },
  methods: {
    getOp() {
      return {
        backgroundColor: "#fff",
        color: [
          "#1f77b4",
          "#ff7f0e",
          "#2ca02c",
          "#d62728",
          "#9467bd",
          "#8c564b",
          "#FF0080"
        ],
        tooltip: {
          trigger: "axis",
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "cross"
          },
          formatter: params => {
            let res = "&nbsp;&nbsp;&nbsp;time : " + params[0].data[0] + "ms";
            // debugger
            params.forEach(v => {
              res += "<br>" + v.marker + v.seriesName + " : " + v.data[1];
            });
            return res;
          }
        },
        grid: {
          left: 60,
          right: 220,
          bottom: 30,
          top: 40,
          containLabel: true,
          show: false
        },
        legend: this.opt_legend,
        dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0],
            start: 0,
            end: 67
          }
        ],
        xAxis: {
          type: "category",
          data: _.range(0, 3001)
        },
        yAxis: [
          {
            name: "电压/V",
            type: "value",
            min: 0,
            max: 30,
            offset: 70,
            position: "right",
            axisLine: {
              lineStyle: {
                color: "#ffe100"
              }
            },
            splitLine: {
              show: false
            }
          },
          {
            name: "转速/RPM",
            type: "value",
            min: 0,
            max: 1500,
            position: "left",
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#58a3f4"
              }
            },
            splitArea: {
              show: false
            }
          },
          {
            name: "电流/A",
            type: "value",
            min: 0,
            max: 1500,
            position: "right",
            offset: 0,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#f90c14"
              }
            }
          },
          {
            name: "温度/C",
            type: "value",
            min: 0,
            max: 200,
            position: "left",
            offset: 70,
            splitLine: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#ff0505"
              }
            }
          }
        ],
        series: this.opt_serieses
      };
    },
    $_triggerConfigForm() {
      this.config_form_show = !this.config_form_show;
    }
  },
  mounted() {
    this.sChart = echarts.init(this.$refs["schart"]);
    this.$nextTick(() => {
      this.sChart.setOption(this.getOp());
    });
  }
};
</script>

<style lang="scss">
.time-line-root {
  .time-line-schart {
    width: 1526px;
    height: 712px;
  }
  .config-trigger {
    position: absolute;
    right: 10px;
    bottom: 10px;
    cursor: pointer;
  }
  .config {
    position: absolute;
    right: 10px;
    bottom: 40px;
    width: 500px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
    border-color: #eee;

    .h-btn-apply {
      float: right;
    }

    &.config-enter-active,
    &.config-leave-active {
      transition: opacity 0.5s;
    }
    &.config-enter,
    &.config-leave-to {
      opacity: 0;
    }
  }
  .h-view-number-container {
    $gray: #b5b5b5;
    $hwidth: 98px;
    position: absolute;
    top: 0;
    right: 0;
    width: 214px;
    padding-left: 70px;
    .h-view-number {
      margin-bottom: 5px;
      width: $hwidth;
      margin-bottom: 8px;
      font-size: 12px;
      display: inline-block;
      border-bottom: solid 1px $gray;
    }
    .h-button-group {
      &.ivu-btn-group {
        .ivu-btn {
          padding: 0px 6px;
          &:not(:first-child) {
            margin-left: 5px;
          }
        }
        .ivu-btn-primary {
          background-color: $gray;
          border-color: $gray;
          &:focus {
            box-shadow: 0 0 0 0px $gray;
          }
        }
        .ivu-btn-ghost {
          color: $gray;
        }
        .ivu-btn-ghost:focus {
          box-shadow: 0 0 0 0px $gray;
        }
        .ivu-btn-ghost:hover {
          color: $gray;
          border-color: $gray;
        }
        .ivu-btn-primary ~ .ivu-btn {
          border-color: $gray;
        }
      }
    }
  }
}
</style>
